<!-- 交互内容 -->
<template>
	<view class="fixbg" v-if="imageURL && imageURL!=''" :style="{'background-image' : 'url(' + imageURL + ')'}">
		<view v-if="content.pic_Type === 1">
			<view :class="[buttonclass]">
				<view class="home" @click="Home(content.book_id,content.pic_id)">
					保存
				</view>
				<view class="button1" @click="handleToindex(content.button1_id)">{{content.button1_text}}</view>
				<view class="button2" @click="handleToindex(content.button2_id)">{{content.button2_text}}</view>
				<view class="button3" @click="handleToindex(content.button3_id)">{{content.button3_text}}</view>
				<view class="button4" @click="handleToindex(content.button4_id)">{{content.button4_text}}</view>
			</view>
		</view>
		<view v-else-if="content.pic_Type === 0">
			<view :class="[textclass]">
				<view class="home" @click="Home(content.book_id,content.pic_id)">保存</view>
				<view class="image_man">
					<image class="_image" v-if="content.pic_man.url && content.pic_man.url!=''" :src="content.pic_man.url"></image>
				</view>
				<view class="booktext">{{content.text}}</view>
				<view class="button0" @click="handleToindex(content.button1_id)">next</view>
			</view>
		</view>
		<view v-else-if="content.pic_Type === 2">
			<view :class="[textclass]">
				<view class="home" @click="Home(content.book_id,content.pic_id)">保存</view>
				<view class="button01" @click="handleToindex(content.button1_id)">next</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:{},
				buttonclass: 'button',
				textclass: 'text',
				imageURL:'',
				id : 0
			}
		},
		onLoad(e) {//在页面加载时获取数据
			//console.log("接收e的具体值为：",e)
			this.id = e.nextid,
			this.getbookleaves()
		},
		methods: {
			// 跳转界面
			handleToindex(e){
				// console.log(e)
				uni.redirectTo({
					url:"../bookinside/bookinside?nextid=" + e
				})
			},
			
			//返回书封面界面并传输记录到的页面信息
			Home(e1,e){
				// console.log(e)
				//uni.navigateto有访问层数限制，所以采用uni.redirectTo及时清除已经访问过的界面
				uni.redirectTo({
					url:"../savecomplite/savecomplite?nextid=" + e1 + "&nowpage=" + e
				})
			},
			//动态获取页面数据
			getbookleaves(){
				this.id = Number(this.id)//直接获取到的e为字符串类型，转换成int
				const db = uniCloud.database()
				const collection = db.collection('book_chosen')
				let res = collection.where({pic_id:this.id})
				.get()
				.then(res => {
					console.log(res)//调试，将内容打印到consolelog界面
					this.content = res.result.data[0]
					this.imageURL = res.result.data[0].bannerfile.url
					console.log(this.imageURL)
					console.log("接收到的具体内容",this.content.pic_man)
				})
			}
		}
	}
</script>

<style>
    .button{
		height: 100%;/*屏幕大小750rpx * 1400rpx*/
	    font-size:60rpx;
	    color:#00aaff;
		display: flex;
		flex-direction: column;
		/* top:calc(var(--window-top) + 10px) */
	}
	.text{
		height: 100%;/*屏幕大小750rpx * 1400rpx*/
		display: flex;
		flex-direction: column;
		/* top:calc(var(--window-top) + 10px) */
	}
	._image{
		width:100%;
		height:100%;
	}
	.home{
		width: 90rpx;
		height: 60rpx;
		font-size:40rpx;
		color:#000000;
		background-color:#00ffff85;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}
	/* Type=1格式 */
	.button1{
		width: 750rpx;
		height: 87.5rpx;
		background-color:#88c3c885;
		margin: 800rpx 0rpx 0rpx 0rpx;/*上右下左注意小盒子的margin是从第一个盒子开始算起的*/
	}
	.button2{
		width: 750rpx;
		height: 87.5rpx;
		background-color:#88c3c885;
		margin: 10rpx 0rpx 0rpx 0rpx;/*上右下左*/
	}
	.button3{
		width: 750rpx;
		height: 87.5rpx;
		background-color:#88c3c885;
		margin: 10rpx 0rpx 0rpx 0rpx;/*上右下左*/
	}
	.button4{
		width: 750rpx;
		height: 87.5rpx;
		background-color:#88c3c885;/*前两个是调节透明度的 大小为(十六进)00~ff*/
		margin: 10rpx 0rpx 0rpx 0rpx;/*上右下左*/
	}
	
	/* Type=2格式 */
	.booktext{
		width: 750rpx;
		height: 300rpx;
		font-size:30rpx;
		color:#000000;
		background-color:#88c3c885;
		margin: 0rpx 0rpx 0rpx 0rpx;/*上右下左*/
	}
	.button0{
		width: 150rpx;
		height: 150rpx;
		font-size:60rpx;
		color:#00aaff;
		/* background-color:#88c3c885; */
		margin: 10rpx 0rpx 0rpx 600rpx;/*上右下左*/
	}
	.image_man{
		width: 200rpx;
		height: 200rpx;
		margin: 600rpx 0rpx 0rpx 0rpx;/*上右下左*/
	}
	.back{
		width: 125rpx;
		height: 60rpx;
		margin: 0rpx 0rpx 0rpx 0rpx;
	}
	.button01{
		width: 150rpx;
		height: 150rpx;
		font-size:60rpx;
		color:#00aaff;
		/* background-color:#88c3c885; */
		margin: 1100rpx 0rpx 0rpx 600rpx;/*上右下左*/
	}
</style>
